<template>
  <!-- 输入款号收银 -->
  <view class="product-form">
    <view class="containe w100">
      <view class="view form mb-10 flex column justify-center" style="padding-top:30px">
        <up-input
          fontSize="32rpx"
          placeholder="请输入款号或条形码"
          :border="'bottom'"
          v-model="formData.productSkuCode"
          type="text"
        >
          <template #prefix>
            <up-text text="款号" margin="0 46px 0 0" type="tips"></up-text>
          </template>
        </up-input>
      </view>
    </view>


    <!-- 确定按钮 -->
    <view class="bottom-button">
      <button class="confirm-btn" @click="handleSubmit">确定</button>
    </view>

    <!-- 入库成功 -->
    <!-- <view class="success-page" v-if="showSuccessPage">
      <view class="success-icon">
        <u-icon name="checkmark-circle" color="rgba(43, 164, 113, 1)" size="80"></u-icon>
      </view>
      <text class="success-text">新建/编辑完成</text>
      <view class="button-group">
        <button class="action-btn secondary-btn" @click="handleComplete">完成</button>
      </view>
    </view> -->
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getStorage, setStorage } from "@/utils/storage";
import { shopApi } from "@/api";
import { BASE_API } from "@/config";
const shopName = ref("");
let showSuccessPage = ref(false);
const imageUrl = ref("");
const formData = reactive({
  productName: "",
  productCode: "",
  productSkuCode:"",
  price: "",
  inStockQuantity: 1
});

onLoad((options) => {
  shopName.value = getStorage("shopName");
});

const handleInput = (e) => {
  formData.productSkuCode = e.detail.value.toUpperCase();
};

const handleSubmit = () => {

  if ( !formData.productSkuCode) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none"
    });
    return;
  }
  shopApi.GETFRONTPRODUCTINSTOCKBYCODE({
    productSkuCode: formData.productSkuCode
  }).then((res) => {
    if (res.code != 200 || !res.result.type) {
      uni.showModal({
        title: '商品款号不存在',
        content: '系统仓库不存在该款号，是否作为其他条码商品添加',
        success(res) {
          if (res.confirm) {
           uni.navigateTo({
             url: '/pagesshop/inventory/addproduct?code='+ formData.productSkuCode+'&from=num'
           })
           formData.productSkuCode = ''
          }
        }
      })
      return;
    }
    if(res.result.type == 2) {
      uni.navigateTo({
        url: '/pagesshop/scancodecashier/index?code='+ formData.productSkuCode+'&from=num'
      })
    } else {
      uni.navigateTo({
        url: '/pagesshop/inventory/addnumpage?code='+ formData.productSkuCode+'&from=shouyin'
      })
    }

    formData.productSkuCode = ''
  });
};
const handleComplete = () => {
    // TODO: 是否返回到列表页 暂定继续添加
    imageUrl.value = "";
    formData.productName = "";
    formData.productCode = "";
    formData.productSkuCode=""
    formData.price = "";
    formData.inStockQuantity = 1;
    showSuccessPage.value = false;
    // uni.navigateTo({
    //   url: `/pagesshop/inventory/add`
    // });
    uni.navigateBack()
};
</script>
<style lang="scss" scoped>
.product-form {
  background-color: #f3f3f3;
  min-height: 100vh;

  .form-item {
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    background: #fff;
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
    }

    .upload-box {
      width: 160rpx;
      height: 160rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .upload-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      border-radius: 8rpx;
    }

    .price-input {
      display: flex;
      align-items: center;

      .unit {
        margin-left: 10rpx;
        color: #333;
        font-size: 28rpx;
      }
    }
  }
  .form-items {
    box-sizing: border-box;
    background: #fff;
    .label {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  .containe {
    background: #fff;
  }

  .inventory-item {
    padding: 12rpx 24rpx 24rpx;
    box-sizing: border-box;
    background: #fff;
    .labels {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.6);
    }
    .number-input {
      margin-top: 20rpx;
    }
  }

  .bottom-button {
    margin-top: 20px;
    padding: 24rpx 24rpx 44rpx 24rpx;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    z-index: 9;

    .confirm-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: rgba(214, 142, 68, 1);
      color: #fff;
      border: none;
      border-radius: 40rpx;
      font-size: 32rpx;

      &:active {
        opacity: 0.9;
      }
    }
  }
  .success-page {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120rpx 40rpx;
    box-sizing: border-box;
    z-index: 99;
    width: 100%;
    height: 100vh;
    .success-icon {
      margin-bottom: 40rpx;
    }

    .success-text {
      font-size: 36rpx;
      color: #333;
      font-weight: bold;
      margin-bottom: 100rpx;
    }

    .button-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .action-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        border: none;

        &.primary-btn {
          background-color: rgba(214, 142, 68, 1);
          color: #fff;
        }

        &.secondary-btn {
          background-color: rgba(253, 236, 219, 1);
          color: rgba(214, 142, 68, 1);
        }
      }
    }
  }
}

:deep(.u-input) {
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
</style>
